<template>
  <div>
    <div>
      <el-dialog
        v-model="addCourseFileDialogForm"
        title="上传课程资源"
        width="600px"
        center
      >
        <el-upload
          drag
          multiple
          ref="uploadRef"
          class="upload-demo"
          name="file"
          method="post"
          v-model:file-list="fileList"
          :auto-upload="false"
          :action="uploadCourseFileListUrl"
          :headers="{'access_token':store.getters.getToken}"
          :on-success="uploadCourseFileListSuccess"
        >
          <div style="width: 560px">
            <el-icon class="el-icon--upload" size="56">
              <upload-filled/>
            </el-icon>
            <div class="el-upload__text">
              请选择课程资源上传
            </div>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              <el-button type="success" @click="submitUpload" style="margin-left: 43%">开始上传
              </el-button>
            </div>
          </template>
        </el-upload>
      </el-dialog>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {
  getCurrentInstance, ref, defineExpose,
} from 'vue';
import type { UploadInstance, UploadProps, UploadUserFile } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const { proxy } = getCurrentInstance();
const route = useRoute();
const store = useStore();

// 现有资源集合
const resourcesList = ref();
// 上传课程资源弹窗控制
const addCourseFileDialogForm = ref<boolean>();
// 上传课程资源集合
const fileList = ref<UploadUserFile[]>([]);
// 上传课程资源地址
const uploadCourseFileListUrl = ref();
// element-plus用于重置表单
const uploadRef = ref<UploadInstance>();

// 上传课程资源
const controlAddCourseDialogForm = () => {
  const courseId = sessionStorage.getItem('courseId');
  addCourseFileDialogForm.value = true;
  uploadCourseFileListUrl.value = `${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_UPLOADBATCH_MANAGE}?courseId=${courseId}`;
};
// 手动上传课程资源
const submitUpload = () => {
  uploadRef.value!.submit();
};
// 上传成功执行的回调
const uploadCourseFileListSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile,
) => {
  proxy.$emit('loadTableList');
  ElMessage.success('上传成功');
};

// 暴露组件给父容器使用
defineExpose({
  controlAddCourseDialogForm,
});

</script>

<style scoped>
.upload-demo{
  width: 560px;
}
/deep/ .el-upload-dragger{
  width: 560px;
}
</style>
